<template>
  <div class="main_spac1">
    <div class="main_white padding10">
      <!-- <div class="main_ti box">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="box">
          <el-tab-pane label="全部" name="-1"></el-tab-pane>
          <el-tab-pane label="已上架" name="0"></el-tab-pane>
          <el-tab-pane label="未上架" name="1"></el-tab-pane>
        </el-tabs>
      </div> -->
      <div class="mainor_form small-top">
        <el-form
          :inline="true"
          :model="orderForm"
          class="demo-form-inline"
          ref="menuOrderFrom"
          label-width="90px"
          id="form"
        >
          <el-form-item label="配送日期：" prop="sendTime">
            <el-date-picker
              v-model="sendTime"
              type="daterange"
              class="time220"
              :editable="false"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :clearable="false"
              :picker-options="pickerOptions"
              @change="getArticleList"
            />
          </el-form-item>
          <el-form-item label="订单号：" prop="order_sn">
            <el-input
              v-model.trim="orderForm.order_sn"
              placeholder="订单号"
              clearable
              class="wid220"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户：" prop="uid">
            <change-user-input
              ref="changeUserInput_form"
              @sendValue="
                (data) => {
                  orderForm.uid = data.nickname;
                }
              "
            ></change-user-input>
          </el-form-item>
          <MainFormBtn @reset="reset" @getSearchFor="getSearchFor" :loading="listLoading" />
        </el-form>
      </div>
      <!-- <div class="main-controls-wrap mg-t-0">
        <el-button class="mg-r-6 mainor_tea">创建订单</el-button>
      </div> -->
      <div class="main_table" :style="{ height: borderHeight + 'px' }">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="tableData"
          element-loading-text="加载中"
          class="multipleTable"
          fit
          border
          highlight-current-row
          @selection-change="handleSelectionChange"
          :header-cell-class-name="this.$verticaline"
          :height="borderHeight"
          @header-dragend="changeTableWidth"
          :header-cell-style="tableHeightStyle"
        >
          <!-- <el-table-column type="selection" align="center" /> -->
          <el-table-column label="订单号" prop="order_sn" fixed="left" :min-width="tableWidth[hash + 'order_sn'] || 220" />
          <el-table-column label="用户" prop="nickname" fixed="left" :min-width="tableWidth[hash + 'nickname'] || 220" />
          <el-table-column label="订单日期" prop="date_range" fixed="left" :min-width="tableWidth[hash + 'date_range'] || 220" />
          <el-table-column label="下单日期" prop="created_at" fixed="left" :min-width="tableWidth[hash + 'created_at'] || 220" />
          <el-table-column label="订单金额" prop="order_amount" fixed="left" :min-width="tableWidth[hash + 'order_amount'] || 220" />
          <el-table-column
            label="管理操作"
            align="left"
            fixed="right"
            :width="tableWidth[hash + 'operate'] || 240"
            prop="operate"
            class-name="main_hei"
          >
            <template slot-scope="scope">
              <!-- <el-link type="warning" @click="examine(scope.row)">审核</el-link> -->
              <!-- <el-link type="primary" @click="deit(scope.row)">编辑</el-link> -->
              <el-link @click="lookDetail(scope.row)">查看</el-link>
              <el-link @click="lookChildDetail(scope.row)">子订单</el-link>
              <!-- <el-link @click="custom(scope.row)">取消</el-link> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_num boxdq marginTop10">
        <div></div>
        <!-- 分页 -->
        <div class="main_num_r">
          <MainPagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeSize"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dateOption from "@/options/dateOption";
import { mixins } from "@/mixins/index.js";
import { getInfo } from '@/api/menu.js'
export default {
  mixins: [mixins],
  data() {
    return {
      activeName: '-1',
      showCancelOrder: false,
      sendTime: [],
      orderForm: {
        order_sn: '',
        user_id: '',
      },
      pickerOptions: dateOption,
      listLoading: false,
      currentPage: 1,
      totalCount: 1,
      pageSize: 20,
      tableData: [],
      orderInfo: {
        today_order_num: 0,
        today_order_money: 0,
        today_send_num: 0,
        today_send_order_money: 0,
        today_send_money: 0,
      }
    }
  },
  mounted() {
    this.getNumerical(235);
    this.getPageData()
  },
  methods: {
    getPageData() {
      this.listLoading = true
      const params = {
        status: this.activeName,
        page: this.currentPage,
        pagesize: this.pageSize,
        order_sn: this.orderForm.order_sn,
        nickname: this.orderForm.uid,
        order_date: this.sendTime.length ? this.sendTime.join('_') : ''
      }
      getInfo('/packageOrder/menuOrders', params).then(res => {
        if(res.data) {
          this.listLoading = false
          this.tableData = res.data.list
          this.totalCount = res.data.total
        }
      })
    },
    handleClick() {
      this.reset()
    },
    canceledChange() {

    },
    reset() {
      this.sendTime = ''
      this.$refs.menuOrderFrom.resetFields()
      this.$refs.changeUserInput_form.name = ''
      this.getPageData()
    },
    getSearchFor() {
      this.currentPage = 1
      this.getPageData()
    },
    getArticleList() {},
    handleSelectionChange() {},
    changeSize(page) {
      this.pageSize = page
    },
    changePage(page) {
      this.currentPage = page
    },
    examine(row) { //  审核
      this.$alert(`<p>该订单就餐日期：${row.date_range}</p><p>内所有订单批量操作审核通过。</p>`, '批量审核', {
        showCancelButton: true,
        confirmButtonText: '通过审核',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true,
        confirmButtonClass: 'submit-examine',
        cancelButtonClass: 'cancel-examine',
        customClass: 'custom-examine',
        callback: action => {
          if(action === 'confirm') {
            console.log(row, action);
            this.$message({
              type: 'info',
              message: `action: `
            });
          }
        }
      });
    },
    custom(row) { //  取消
      this.$alert(`<p>该订单就餐日期：${row.date_range}</p><p>内所有订单批量操作取消。</p>`, '批量取消', {
        showCancelButton: true,
        confirmButtonText: '确认取消',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true,
        confirmButtonClass: 'submit-examine',
        cancelButtonClass: 'cancel-examine',
        customClass: 'custom-examine',
        callback: action => {
          if(action === 'confirm') {
            console.log(row, action);
            this.$message({
              type: 'info',
              message: `action: `
            });
          }
        }
      });
    },
    lookDetail(row) { //  查看
      this.$router.push({
        path: '/menu/order/detail',
        query: {
          orderId: row.id
        }
      })
    },
    lookChildDetail(row) { //  子订单查看
      this.$router.push({
        path: '/order/list',
        query: {
          order_sn: row.order_sn
        }
      })
    },
    deit(row) { //  查看
      this.$router.push({
        path: '/menu/order/edit',
        query: {
          orderId: row.id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
@import "@/styles/newIndex.scss";
.main_ti {
  padding-bottom: 1px;
  position: relative;
  /deep/.el-tabs__header {
    margin: 0;
  }
  /deep/.el-checkbox {
    margin-top: 12px;
  }
  &::after {
    height: 1px;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #e4e7ed;
    z-index: 1;
  }
  /deep/.el-tabs__nav-wrap::after {
    height: 0;
  }
}
/deep/.el-form-item--small.el-form-item {
  margin-bottom: 14px;
}
/deep/.main_table .el-table__fixed-body-wrapper {
  border-left: 1px solid #ebeef5;
}
</style>
<style lang="scss">
.submit-examine.el-button--primary.el-button {
  background: #1BA88E;
  border-color: #1BA88E;
  &:hover {
    background: rgba(27,168,142, .8);
    border-color: rgba(27,168,142, .8);
  }
}
.custom-examine {
  .el-message-box__title {
    color: #000;
  }
  .el-message-box__header, .el-message-box__content {
    border-bottom: 1px solid rgba(0,0,0, .05) ;
  }
  .el-message-box__content {
    padding: 30px 31px;
    margin-bottom: 17px;
  }
}
</style>